<template>
  <div class="home">
    <div class="header">
      <img src="https://fr-static.jiazhengye.cn/编组.adbe8df547f9445a.png" alt="" />
      <span>小熊美家邮箱签名设置</span>
    </div>
    <div class="main">
      <div class="list">
        <span class="label">姓名：</span>
        <input class="input" type="text" v-model="name" />
      </div>
      <div class="list">
        <span class="label">部门：</span>
        <select class="input" name="" id="" v-model="department">
          <option value="研发部">研发部</option>
          <option value="销售部">销售部</option>
          <option value="课程部">课程部</option>
          <option value="人事部">人事部</option>
        </select>
      </div>
      <div class="list">
        <span class="label">职位：</span>
        <input class="input" type="text" v-model="position" />
      </div>
      <div class="list">
        <span class="label">手机号：</span>
        <input class="input" type="number" maxlength="11" v-model="phone" />
      </div>
      <div class="submit" @click="subitClick">立即生成邮箱签名图片</div>
    </div>

    <div class="content" ref="imgDom">
      <div class="con">
        <div class="top">
          <div class="left">
            <span class="name">{{ name }}</span>
            <span class="position">{{ department }}-{{ position }}</span>
          </div>
          <div class="right">
            <img
              src="https://fr-static.jiazhengye.cn/SketchPng28a6a6ef555ad3d6a928fb59d1e8756cb2248b45216a7bfab92c9fe9a2d72b8b.6db2cab077e76e7a.png"
              alt=""
            />
            <span>小熊美家</span>
          </div>
        </div>
        <div class="labelBox phoneBox">
          <img src="https://fr-static.jiazhengye.cn/122.86565421275850e7.png" alt="" />
          <div>{{ phone.slice(0, 3) + '-' + phone.slice(3, 7) + '-' + phone.slice(7) }}</div>
        </div>
        <div class="labelBox">
          <img src="https://fr-static.jiazhengye.cn/333.a13f444c46117ad5.png" alt="" />
          <div>北京市海淀区创业中路32号楼3层301A</div>
        </div>
      </div>
      <div class="tip">互联网让家政更美好</div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      name: '',
      phone: '',
      position: '',
      department: ''
    }
  },
  methods: {
    subitClick() {
      // domtoimage
      //   .toJpeg(this.$refs.imgDom)
      //   .then(function(dataUrl) {
      //     console.log(dataUrl)
      //     var link = document.createElement('a')
      //     link.download = 'my-image-name.jpeg'
      //     link.href = dataUrl
      //     link.click()
      //   })
      //   .catch(function(error) {
      //     console.error('oops, something went wrong!', error)
      //   })

      html2canvas(this.$refs.imgDom, {
        dpi: 600,
        scale: 1,
        width: 750,
        height: 250,
        scrollY: 0,
        scrollX: 0,
        useCORS: true // 【重要】开启跨域配置
      })
        .then((canvas) => {
          console.log(canvas.toDataURL())
        })
        .catch(() => {
          alert('失败')
        })
    }
  }
}
</script>
<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #09be89;
  img {
    width: 48px;
    height: 48px;
  }
  span {
    margin-left: 15px;
    font-size: 20px;
    font-family: Microsoft YaHei, sans-serif, Helvetica, PingFangTC-Regular, PingFangTC;
    font-weight: 500;
    color: #fff;
  }
}
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  .list {
    margin-top: 32px;
  }
  span {
    display: inline-block;
    width: 56px;
    font-size: 14px;
    font-family: Microsoft YaHei, sans-serif, Helvetica, PingFangTC-Regular, PingFangTC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    text-align: right;
  }
  .input {
    width: 435px;
    height: 32px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 435px;
    height: 32px;
    background: #09be89;
    font-size: 14px;
    font-family: Microsoft YaHei, sans-serif, Helvetica, PingFangTC-Regular, PingFangTC;
    font-weight: 400;
    color: #fff;
    line-height: 22px;
    margin-top: 37px;
    cursor: pointer;
  }
}

.content {
  position: fixed;
  width: 750px;
  height: 250px;
  background: #fff;
  right: 100%;
  .con {
    padding: 23px 17px 0 42px;
  }
  .top {
    display: flex;
  }
  .left {
    display: flex;
    align-items: flex-end;
    flex: 2;
    .name {
      font-size: 42px;
      font-family: Microsoft YaHei, sans-serif, Helvetica, PingFangTC-Regular, PingFangTC;
      font-weight: 400;
      color: #1a1a1a;
      letter-spacing: 2px;
      display: table-cell;
      vertical-align: bottom;
    }
    .position {
      font-size: 24px;
      font-family: Microsoft YaHei, sans-serif, Helvetica, PingFangTC-Regular, PingFangTC;
      font-weight: 400;
      color: #1a1a1a;
      letter-spacing: 1px;
      margin-left: 18px;
      margin-bottom: 4px;
    }
  }

  .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    img {
      width: 47px;
      height: 47px;
    }
    span {
      font-size: 26px;
      font-family: Microsoft YaHei, sans-serif, Helvetica, PingFangTC-Regular, PingFangTC;
      font-weight: 400;
      color: #1a1a1a;
      letter-spacing: 1px;
      margin-left: 7px;
    }
  }
  .phoneBox {
    margin: 26px 0 16px 0;
  }
  .labelBox {
    display: flex;
    align-items: center;
    img {
      width: 18px;
      height: 26px;
      margin-right: 10px;
    }
    div {
      font-size: 20px;
      font-family: Microsoft YaHei, sans-serif, Helvetica, PingFangTC-Regular, PingFangTC;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 28px;
    }
  }
  .tip {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 750px;
    height: 49px;
    line-height: 49px;
    background: #09be89;
    font-size: 20px;
    font-family: Microsoft YaHei, sans-serif, Helvetica, PingFangTC-Regular, PingFangTC;
    font-weight: 400;
    color: #fff;
    margin-top: 23px;
    text-align: center;
  }
}
</style>
